```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cloudflare + Resend 企业邮箱搭建指南</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', 'Tahoma', Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .step-icon {
            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #1e293b;
        }
        .divider {
            height: 2px;
            background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">免费搭建企业级邮箱</h1>
            <p class="text-xl md:text-2xl mb-8 leading-relaxed">利用 Cloudflare + Resend 实现无限邮箱收发</p>
            <div class="flex justify-center space-x-4">
                <a href="#receive" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
                    <i class="fas fa-inbox mr-2"></i>接收邮件
                </a>
                <a href="#send" class="bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-800 transition duration-300">
                    <i class="fas fa-paper-plane mr-2"></i>发送邮件
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-4xl mx-auto px-4 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <div class="bg-white rounded-xl p-8 shadow-lg">
                <h2 class="text-3xl font-bold mb-6 text-indigo-600 flex items-center">
                    <i class="fas fa-cloud mr-3"></i>
                    Cloudflare 企业邮箱简介
                </h2>
                <p class="text-lg leading-relaxed mb-4">
                    本教程介绍如何利用 <span class="font-bold text-indigo-600">Cloudflare</span> 和 <span class="font-bold text-purple-600">Resend.com</span> 免费搭建无限数量的企业邮箱，实现邮件的收发功能。可用于网站验证、注册小号、临时通信以及保护个人隐私。
                </p>
                <div class="bg-indigo-50 border-l-4 border-indigo-500 p-4 my-6 rounded-r">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-info-circle text-indigo-500"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-indigo-700">
                                Cloudflare 是一家提供 CDN、网络安全、DDoS 防御和域名服务的公司，提供许多免费服务，被戏称为"大善人"或"赛博活佛"。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Email Receiving Section -->
        <section id="receive" class="mb-16">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-6 py-4">
                    <h2 class="text-2xl font-bold text-white flex items-center">
                        <i class="fas fa-inbox mr-3"></i>
                        使用 Cloudflare 接收邮件
                    </h2>
                </div>
                <div class="p-8">
                    <!-- Step 1 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">1</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-indigo-600">将域名托管到 Cloudflare</h3>
                                <ol class="list-decimal pl-5 space-y-3">
                                    <li>
                                        <span class="font-medium">拥有域名</span>：首先需要购买一个域名。
                                    </li>
                                    <li>
                                        <span class="font-medium">登录 Cloudflare</span>：
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>访问 <a href="https://www.cloudflare.com/" class="text-indigo-600 hover:underline" target="_blank">Cloudflare 官网</a> 并登录账号（没有则注册一个）。</li>
                                            <li>点击右上角"添加站点"(Add a site)，输入你的域名，然后点击"继续"(Continue)。</li>
                                            <li>选择免费套餐(Free)，点击"继续"(Continue)。</li>
                                            <li>在"更改名称服务器"(Change your nameservers)步骤，记下 Cloudflare 分配的两个名称服务器(Name Server)地址。</li>
                                            <li>前往你的域名购买网站，将域名的名称服务器更改为 Cloudflare 提供的地址。</li>
                                            <li>返回 Cloudflare 页面，点击"立即检查"(Check nameservers)，然后点击"继续"(Continue)。</li>
                                            <li>点击"开始使用"(Get started)。</li>
                                            <li>回到 Cloudflare 首页，确保域名旁显示一个对勾，表示托管成功。</li>
                                        </ul>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">2</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-indigo-600">启用电子邮件路由</h3>
                                <ol class="list-decimal pl-5 space-y-3">
                                    <li>
                                        <span class="font-medium">进入域名管理</span>：在 Cloudflare 首页点击你的域名（例如：<code>tostirng.site</code>）。
                                    </li>
                                    <li>
                                        <span class="font-medium">选择电子邮件路由</span>：在左侧菜单中选择"电子邮件"(Email)，然后点击"电子邮件路由"(Email Routing)。
                                    </li>
                                    <li>
                                        <span class="font-medium">取消新手设置</span>：如果是第一次进入，会看到新手设置引导，点击"取消新手设置"(Cancel setup)。
                                    </li>
                                    <li>
                                        <span class="font-medium">启用电子邮件路由</span>：点击"启用电子邮件路由"(Enable Email Routing)。
                                    </li>
                                    <li>
                                        <span class="font-medium">添加 DNS 记录</span>：Cloudflare 会显示四个 DNS 值，点击"添加记录并启用"(Add records and enable)，Cloudflare 会自动添加这些 MX 记录。
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">3</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-indigo-600">配置 Catch-All 地址</h3>
                                <ol class="list-decimal pl-5 space-y-3">
                                    <li>
                                        <span class="font-medium">进入路由规则</span>：在"电子邮件路由"页面，点击"路由规则"(Routing rules)。
                                    </li>
                                    <li>
                                        <span class="font-medium">编辑 Catch-All 地址</span>：找到 <code>Catch-all address</code> 规则，点击右侧的"编辑"(Edit)。
                                    </li>
                                    <li>
                                        <span class="font-medium">设置目标邮箱</span>：
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>操作(Action)选择"发送到电子邮件"(Send to email address)。</li>
                                            <li>填写你自己的真实邮箱地址（例如：<code>854569279@qq.com</code>），所有发往你域名的邮件都将转发到此邮箱。</li>
                                            <li>点击"保存"(Save)。</li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="font-medium">验证邮箱</span>：
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>保存后，你的目标邮箱会显示"待验证"(Pending verification)。</li>
                                            <li>Cloudflare 会发送一封验证邮件到你填写的邮箱。</li>
                                            <li>登录你的邮箱，点击邮件中的"验证电子邮件地址"(Verify email address)链接。</li>
                                            <li>返回 Cloudflare 页面并刷新，确认目标邮箱地址旁出现一个对勾，表示配置完成。</li>
                                        </ul>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4 -->
                    <div class="mb-6">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">4</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-indigo-600">测试邮件接收功能</h3>
                                <ul class="list-disc pl-5 space-y-2">
                                    <li>向你的域名下的任意邮箱地址发送一封邮件（例如：<code>test@tostring.top</code>）。</li>
                                    <li>检查你配置的 Catch-All 邮箱（例如：163 邮箱），确认邮件已成功接收。这意味着你已拥有无限个企业级邮箱来接收邮件。</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Email Sending Section -->
        <section id="send" class="mb-16">
            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-6 py-4">
                    <h2 class="text-2xl font-bold text-white flex items-center">
                        <i class="fas fa-paper-plane mr-3"></i>
                        使用 Resend.com 发送邮件
                    </h2>
                </div>
                <div class="p-8">
                    <!-- Step 1 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">1</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-purple-600">生成 Resend.com API Key</h3>
                                <ol class="list-decimal pl-5 space-y-3">
                                    <li>
                                        <span class="font-medium">登录 Resend.com</span>：访问 <a href="https://resend.com/" class="text-purple-600 hover:underline" target="_blank">Resend.com 官网</a> 并登录账号（没有则注册一个）。
                                    </li>
                                    <li>
                                        <span class="font-medium">创建 API Key</span>：
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>选择左侧"API Keys"。</li>
                                            <li>点击"Create API Key"。</li>
                                            <li>名字(Name)随意填写，下面两个选项保持默认。</li>
                                            <li>点击"添加"(Add)，你将获得一个 API Key。</li>
                                            <li><strong class="text-purple-600">务必保存好此 API Key</strong>，后续配置和发送邮件需要用到。</li>
                                        </ul>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">2</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-purple-600">添加域名到 Resend.com</h3>
                                <ol class="list-decimal pl-5 space-y-3">
                                    <li>
                                        <span class="font-medium">进入 Domains</span>：在 Resend.com 页面选择左侧"Domains"。
                                    </li>
                                    <li>
                                        <span class="font-medium">添加域名</span>：
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>输入你的域名（例如：<code>tostirng.top</code>）</li>
                                            <li>点击"添加"(Add)。</li>
                                        </ul>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">3</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-purple-600">配置 DNS 记录</h3>
                                <ol class="list-decimal pl-5 space-y-3">
                                    <li>
                                        <span class="font-medium">获取 DNS 记录</span>：Resend.com 会提供三条 DNS 记录，需要将其添加到 Cloudflare。
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>
                                                <strong>第一条记录（MX 类型）</strong>：
                                                <ul class="list-[circle] pl-5 mt-1 space-y-1">
                                                    <li>类型(Type)：<code>MX</code></li>
                                                    <li>名称(Name)：<code>resend</code></li>
                                                    <li>值(Value)：Resend.com 提供的 MX 记录值</li>
                                                    <li>优先级(Priority)：<code>10</code></li>
                                                </ul>
                                            </li>
                                            <li>
                                                <strong>第二条记录（TXT 类型）</strong>：
                                                <ul class="list-[circle] pl-5 mt-1 space-y-1">
                                                    <li>类型(Type)：<code>TXT</code></li>
                                                    <li>名称(Name)：<code>resend</code></li>
                                                    <li>值(Value)：Resend.com 提供的 TXT 记录值</li>
                                                </ul>
                                            </li>
                                            <li>
                                                <strong>第三条记录（TXT 类型）</strong>：
                                                <ul class="list-[circle] pl-5 mt-1 space-y-1">
                                                    <li>类型(Type)：<code>TXT</code></li>
                                                    <li>名称(Name)：Resend.com 提供的 TXT 记录名称</li>
                                                    <li>值(Value)：Resend.com 提供的 TXT 记录值</li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <span class="font-medium">在 Cloudflare 添加 DNS 记录</span>：
                                        <ul class="list-disc pl-5 mt-2 space-y-2">
                                            <li>返回 Cloudflare 你的域名管理页面，点击"DNS" → "记录"(Records)。</li>
                                            <li>点击"添加记录"(Add record)，逐一添加上述三条记录，并点击"保存"(Save)。</li>
                                        </ul>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <!-- Step 4 -->
                    <div class="mb-12">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">4</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-purple-600">验证 DNS 记录</h3>
                                <ul class="list-disc pl-5 space-y-2">
                                    <li>返回 Resend.com 的域名设置页面。</li>
                                    <li>点击"验证 DNS 记录"(Verify DNS Records)按钮。</li>
                                    <li>等待所有三条记录都显示为绿色，表示配置成功。</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Step 5 -->
                    <div class="mb-6">
                        <div class="flex items-start">
                            <div class="step-icon text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 mt-1">
                                <span class="font-bold">5</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-xl font-bold mb-4 text-purple-600">发送邮件测试</h3>
                                
                                <div class="mt-8">
                                    <h4 class="text-lg font-semibold mb-4 flex items-center">
                                        <i class="fas fa-code mr-2"></i>
                                        Python 代码发送
                                    </h4>
                                    <div class="bg-gray-800 rounded-lg p-4 mb-6">
                                        <pre class="text-gray-200 overflow-x-auto"><code>import resend

resend.api_key = "re_xxxxxxxxx"

params: resend.Emails.SendParams = {
  "from": "Acme &lt;onboarding@resend.dev&gt;",
  "to": ["delivered@resend.dev"],
  "subject": "hello world",
  "html": "&lt;p&gt;it works!&lt;/p&gt;"
}

email = resend.Emails.send(params)
print(email)</code></pre>
                                    </div>
                                    <ol class="list-decimal pl-5 space-y-3">
                                        <li>
                                            <span class="font-medium">安装依赖</span>：在 Python 编辑器的终端中运行 <code>pip install resend</code>。
                                        </li>
                                        <li>
                                            <span class="font-medium">复制示例代码</span>：在 Resend.com 的"E-mails" → "API"页面复制 Python 示例代码。
                                        </li>
                                        <li>
                                            <span class="font-medium">修改代码</span>：
                                            <ul class="list-disc pl-5 mt-2 space-y-2">
                                                <li>删除发送附件(attachments)相关的代码。</li>
                                                <li>将 <code>RESEND_API_KEY</code> 替换为你之前保存的 API Key。</li>
                                                <li><code>from</code> 字段：发件人名称随意填写，但邮箱地址必须是 <code>your_name@your_domain.com</code> 格式(<code>your_domain.com</code> 是你已配置的域名)。</li>
                                                <li><code>to</code> 字段：收件人邮箱地址（例如：<code>your_outlook@outlook.com</code>）。</li>
                                                <li><code>subject</code> 字段：邮件主题。</li>
                                                <li><code>html</code> 或 <code>text</code> 字段：邮件内容。</li>
                                            </ul>
                                        </li>
                                        <li>
                                            <span class="font-medium">运行代码</span>：执行 Python 代码，若成功则会收到邮件。
                                        </li>
                                    </ol>
                                </div>

                                <div class="mt-8">
                                    <h4 class="text-lg font-semibold mb-4 flex items-center">
                                        <i class="fas fa-terminal mr-2"></i>
                                        cURL 命令发送
                                    </h4>
                                    <ol class="list-decimal pl-5 space-y-3">
                                        <li>
                                            <span class="font-medium">复制 cURL 命令</span>：在 Resend.com 的"E-mails" → "API"页面复制 cURL 示例命令。
                                        </li>
                                        <li>
                                            <span class="font-medium">修改命令</span>：
                                            <ul class="list-disc pl-5 mt-2 space-y-2">
                                                <li>将 <code>Authorization: Bearer YOUR_API_KEY</code> 中的 <code>YOUR_API_KEY</code> 替换为你的 API Key。</li>
                                                <li><code>from</code> 字段：发件人邮箱地址（例如：<code>any@your_domain.com</code>）。</li>
                                                <li><code>to</code> 字段：收件人邮箱地址。</li>
                                                <li><code>subject</code> 和 <code>html</code> 字段：邮件主题和内容。</li>
                                            </ul>
                                        </li>
                                        <li>
                                            <span class="font-medium">在终端运行</span>：在 Linux 服务器或终端中直接粘贴并运行修改后的 cURL 命令。
                                        </li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Resend.com Free Plan -->
        <section class="mb-16">
            <div class="bg-white rounded-xl p-8 shadow-lg">
                <h2 class="text-3xl font-bold mb-6 text-purple-600 flex items-center">
                    <i class="fas fa-gift mr-3"></i>
                    Resend.com 免费额度
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="bg-purple-50 rounded-lg p-6 border border-purple-100">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 p-3 rounded-full mr-4">
                                <i class="fas fa-envelope-open-text text-purple-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-purple-600">每月额度</h3>
                        </div>
                        <p class="text-gray-700">每月 3000 条邮件发送额度。</p>
                    </div>
                    <div class="bg-purple-50 rounded-lg p-6 border border-purple-100">
                        <div class="flex items-center mb-4">
                            <div class="bg-purple-100 p-3 rounded-full mr-4">
                                <i class="fas fa-calendar-day text-purple-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-purple-600">每日额度</h3>
                        </div>
                        <p class="text-gray-700">每日 100 条邮件发送额度。</p>
                    </div>
                </div>
                <div class="bg-purple-100 border-l-4 border-purple-500 p-4 mt-6 rounded-r">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <i class="fas fa-lightbulb text-purple-500"></i>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm text-purple-700">
                                对于个人使用而言，这个额度通常是足够的。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</body>
</html>
```